<template>
    <div :style="{ height: `${contentHeight}px` }" class="content_box" @scroll="scroll">
        <!--这层div是为了把高度撑开，让滚动条出现，height值为所有数据总高-->
        <div :style="{ 'height': `${itemHeight * (listAll.length)}px`, 'position': 'relative' }">
            <!--可视区域里所有数据的渲染区域-->
            <div :style="{ 'position': 'absolute', 'top': `${top}px` }">
                <!--单条数据渲染区域-->
                <div v-for="(item, index) in showList" :key="index" class="item">
                    <div v-for="(it, index) in tableDataFiled1" :key="index">
                        <van-field v-if="it.label != '发证日期' && it.label != '有效期至'&& it.label != '系统施工进度'" :required="true" v-model="item[it.key]"
                            :label="it.label" :placeholder="'请填写' + it.label">
                            <template #button v-if="it.label == '姓名'">
                                <van-button size="small" @click="handleClickADD(item)" type="info">选择</van-button>
                            </template>
                        </van-field>
                        <select-picker v-else :ISrequired="true" :isTime="false" :labels="it.label" :columns="it.NYDARR"
                            :selectValue="item[it.key] | inUseName(it.NYDARR)" @getMessage="setValue" :values="'DICNAME'" :DICID="'DICID'"></select-picker>
                    </div>
                    <div class="line"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Artisans, houseRemoldUnitBuildPersonRel, FileServerProxy, houseRemoldUnitBuildPerson, houseRemoldUnitBuildPersonSave, companyData } from '@/utils/api'
import selectPicker from '@/utils/selectPicker'
export default {
    name: "list",
    data() {
        return {
            listAll: [],  //所有数据
            addShen: [],
            showList: [],  //可视区域显示的数据
            contentHeight: 500,  //可视区域高度
            itemHeight: 220,      //每条数据所占高度
            showNum: 0,  //可是区域显示的最大条数
            top: 0, //偏移量
            scrollTop: 0,  //卷起的高度
            startIndex: 0,  //可视区域第一条数据的索引
            endIndex: 0,  //可视区域最后一条数据后面那条数据的的索引，因为后面要用slice(start,end)方法取需要的数据，但是slice规定end对应数据不包含在里面
            tableDataFiled1: [
                {
                    label: '姓名',
                    key: 'HOUSEAPPLICANT'
                },
                {
                    label: '手机号',
                    key: 'APPLYPHONE'
                },
                {
                    label: '系统施工进度',
                    key: 'XTSGJD',
                    NYDARR:[
                        {
                            DICID:'638',
                            DICNAME:'现场放样'
                        },
                        {
                            DICID:'639',
                            DICNAME:'基槽验线'
                        },
                        {
                            DICID:'640',
                            DICNAME:'一层立模'
                        },
                        {
                            DICID:'641',
                            DICNAME:'竣工验收'
                        },
                    ]
                },
                {
                    label: '所属区域',
                    key: 'SSX'
                },
                {
                    label: '地址',
                    key: 'PERMANENTADDR'
                }
            ],
            xuanze:{}
        }
    },
    filters: {
        inUseName: function (msg, data) {
            let name = ''
            data.forEach(item => {
                if (item.DICID == msg) {
                    name = item.DICNAME
                }
            })
            return name
        }
    },
    methods: {
        async getList() {
            let data = {
                "accessCode": "688bd3883572440a859dfd8ba9194e7b",
                "cityCode": window.localStorage.getItem('citycode'),
                "params": {
                    "dataguid": "3f676590-0bd3-40eb-a592-db8ac3146aca",
                    "searchObject": "",
                    "token": window.localStorage.getItem('token')
                }
            }
            const res = await FileServerProxy(data)
            let relust = JSON.parse(res.data.data).Data
            //数据量过大导致页面渲染卡顿
            //采用虚拟列表渲染的方式
            this.listAll = relust //所有数据
            console.log(this.listAll)
            this.addShen = JSON.parse(JSON.stringify(this.listAll))
            this.scroll();
        },
        setValue(){},
        getMessage(){},
        handleClickADD(data) {
            this.xuanze = data
            this.$toast.success('选择成功')
        },
        seleData(val){
            debugger
            if (!val) return this.listAll = this.addShen
            this.listAll = this.listAll.filter(item => {
                return item.HOUSEAPPLICANT && item.HOUSEAPPLICANT.indexOf(val) > -1
            })
            this.showList = this.listAll
            console.log(this.listAll,'this.listAll')
        },
        //计算可视区域数据
        getShowList() {
            this.showNum = Math.ceil(this.contentHeight / this.itemHeight);  //可视区域最多出现的数据条数，值是小数的话往上取整，因为极端情况是第一条和最后一条都只显示一部分
            this.startIndex = Math.floor(this.scrollTop / this.itemHeight);   //可视区域第一条数据的索引
            this.endIndex = this.startIndex + this.showNum;   //可视区域最后一条数据的后面那条数据的索引
            this.showList = this.listAll.slice(this.startIndex, this.endIndex)  //可视区域显示的数据，即最后要渲染的数据。实际的数据索引是从this.startIndex到this.endIndex-1
            const offsetY = this.scrollTop - (this.scrollTop % this.itemHeight);  //在这需要获得一个可以被itemHeight整除的数来作为item的偏移量，这样随机滑动时第一条数据都是完整显示的
            this.top = offsetY;
        },
        //监听滚动事件，实时计算scrollTop
        scroll() {
            this.scrollTop = document.querySelector('.content_box').scrollTop;  //element.scrollTop方法可以获取到卷起的高度
            this.getShowList();
        }
    },
    components: {
        selectPicker
    },
    mounted() {
        this.getList();
    }
}
</script>

<style scoped>
.content_box {
    overflow: auto;
    /*只有这行代码写了，内容超出高度才会出现滚动条*/
    width: 100%;
    /* border: 1px solid red; */
}

.line {
    width: 100%;
    height: 10px;
    background-color: #f6f6f6;
}

/*每条数据的样式*/
.item {
    height: 220px;
    padding: 5px;
    color: #666;
    box-sizing: border-box;
}
</style>